<template>
  <a-row class="layout" type="flex" justify="center" align="middle">
    <div class="login_form" hoverable>
      <div class="title">后台管理系统注册</div>
      <a-form class="form" ref="loginFormRef" layout="labelCol" :rules="loginRules" :model="loginForm">
        <div class="input">
          <a-form-item label="真实姓名：" name="realname">
            <a-input v-model:value="loginForm.realname" size="middle" />
          </a-form-item>
        </div>
        <div class="inputa">
          <a-form-item label="账号:" name="username">
            <a-input style="width: 190px" v-model:value="loginForm.username" size="middle" />
          </a-form-item>
        </div>
        <div class="inputa">
          <a-form-item label="密码:" name="password">
            <a-input style="width: 190px" v-model:value="loginForm.password" size="middle" type="password" />
          </a-form-item>
        </div>
        <div class="input">
          <a-form-item label="再次输入：" name="password2">
            <a-input v-model:value="loginForm.password2" size="middle" type="password" />
          </a-form-item>
        </div>
        <a-form-item>
          <a-button class="login" type="primary" size="large" block @click="onSubmit" :loading="loading">注册</a-button>
          <a-button class="clear" size="large" block @click="resetForm">清空</a-button>
        </a-form-item>
        <a-button class="skip" type="link" @click="toLogin">已有账号，去登陆</a-button>
      </a-form>
    </div>
  </a-row>
</template>

<script lang="ts">
import { message } from 'ant-design-vue'
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { post } from '../../utils/request/request'
//表单的类型
interface formState {
  username: string
  password: string
  realname: string
  password2: string
}
export default defineComponent({
  name: 'register',
  setup() {
    //表单的ref属性
    const loginFormRef = ref()
    const router = useRouter()
    let loading = ref<boolean>(false)

    //登录表单
    const loginForm: formState = reactive({
      username: '',
      password: '',
      realname: '',
      password2: ''
    })

    //登录验证规则
    const loginRules = {
      username: [
        {
          message: '请输入用户名',
          trigger: 'blur'
        },
        { min: 3, max: 18, message: '长度应该在3-18的范围内', trigger: 'blur' }
      ],
      realName: [
        {
          message: '请输入真实姓名',
          trigger: 'blur'
        },
        { min: 2, max: 8, message: '长度应该在2-8的范围内', trigger: 'blur' }
      ],
      password: [
        {
          message: '请输入密码',
          trigger: 'blur'
        },
        { min: 5, max: 18, message: '长度应该在5-18的范围内', trigger: 'blur' }
      ],
      password2: [
        {
          message: '请再次输入密码',
          trigger: 'blur'
        }
      ]
    }

    //提交表单
    const onSubmit = () => {
      loginFormRef.value
        .validate()
        .then(async () => {
          if (loginForm.password === loginForm.password2) {
            loading.value = true
            try {
              const result: any = await post('/admin/api/v1/register', {
                username: loginForm.username,
                password: loginForm.password,
                name: loginForm.realname
              })
              loading.value = false
              if (result.status_code === -1) {
                message.error(result.status_msg)
              } else if (result.status_code === 0) {
                message.success('注册成功')
                try {
                  const res: any = await post('/admin/api/v1/login', {
                    username: loginForm.username,
                    password: loginForm.password
                  })
                  if (res.status_code === 0) {
                    message.success('欢迎进入')
                    localStorage.setItem('loginTime', new Date().getTime().toString())
                    localStorage.setItem('token', res.data.token)
                    localStorage.setItem('id', res.data.user_id)
                    localStorage.setItem('username', loginForm.username)
                    localStorage.setItem('role', res.data.role)
                    router.push({ name: 'home' })
                  } else {
                    message.info('账号不存在或密码错误')
                  }
                } catch {
                  message.info('请求失败')
                }
              } else {
                message.info('用户名重复，请重新输入')
              }
            } catch {
              message.info('请求失败')
            }
          } else {
            message.info('两次输入的密码不同')
          }
        })
        .catch(() => {
          message.info('请输入完整')
        })
    }

    //清空表单
    const resetForm = () => {
      loginFormRef.value.resetFields()
    }

    //回到登陆界面
    const toLogin = () => {
      router.push({ name: 'login' })
    }

    return {
      loginFormRef,
      loading,
      loginForm,
      loginRules,
      toLogin,
      onSubmit,
      resetForm
    }
  }
})
</script>

<style lang="less" scoped>
.login_form {
  padding: 10px 80px;
  background: #fff;
  border-radius: 30px;
  .form {
    width: 100%;
    max-width: 300px;
  }
  .login {
    width: 30%;
    border-radius: 5px;
    margin: 10px 0 0 20px;
  }
  .clear {
    width: 30%;
    border-radius: 5px;
    margin-left: 60px;
  }
}
.title {
  color: #000;
  padding: 10px 0 30px 20px;
  font-size: 29px;
  font-weight: bold;
}
.input {
  margin: -4px;
}
.inputa {
  position: relative;
  left: 15px;
}
.skip {
  position: relative;
}
.layout {
  height: 500px;
}
</style>
